<template>
  <div class="services-page">
    <!-- 页面标题 -->
    <section class="page-header">
      <div class="container">
        <h1 data-aos="fade-up">业务范围</h1>
        <p data-aos="fade-up" data-aos-delay="100">为您提供全方位的跨境电商解决方案</p>
      </div>
    </section>

    <!-- 主要服务 -->
    <section class="main-services">
      <div class="container">
        <div class="services-grid">
          <div class="service-card" data-aos="fade-up">
            <div class="service-icon">
              <i class="el-icon-shopping-cart-full"></i>
            </div>
            <h3>跨境电商平台</h3>
            <p>提供一站式跨境电商平台解决方案，包括商品管理、订单处理、支付结算等功能。</p>
          </div>
          <div class="service-card" data-aos="fade-up" data-aos-delay="100">
            <div class="service-icon">
              <i class="el-icon-truck"></i>
            </div>
            <h3>国际物流服务</h3>
            <p>整合全球优质物流资源，提供高效、可靠的国际物流解决方案。</p>
          </div>
          <div class="service-card" data-aos="fade-up" data-aos-delay="200">
            <div class="service-icon">
              <i class="el-icon-money"></i>
            </div>
            <h3>跨境支付</h3>
            <p>支持多种国际支付方式，提供安全、便捷的跨境支付解决方案。</p>
          </div>
          <div class="service-card" data-aos="fade-up">
            <div class="service-icon">
              <i class="el-icon-data-analysis"></i>
            </div>
            <h3>数据分析</h3>
            <p>提供专业的市场分析和数据洞察，助力企业做出明智的商业决策。</p>
          </div>
          <div class="service-card" data-aos="fade-up" data-aos-delay="100">
            <div class="service-icon">
              <i class="el-icon-s-custom"></i>
            </div>
            <h3>客户服务</h3>
            <p>提供7*24小时多语言客户服务，确保客户获得及时、专业的支持。</p>
          </div>
          <div class="service-card" data-aos="fade-up" data-aos-delay="200">
            <div class="service-icon">
              <i class="el-icon-s-marketing"></i>
            </div>
            <h3>营销推广</h3>
            <p>提供全方位的数字营销服务，帮助企业在全球市场提升品牌影响力。</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 服务优势 -->
    <section class="service-advantages">
      <div class="container">
        <h2 class="section-title" data-aos="fade-up">我们的优势</h2>
        <div class="advantages-grid">
          <div class="advantage-item" data-aos="fade-up">
            <div class="advantage-number">01</div>
            <h3>专业团队</h3>
            <p>拥有经验丰富的跨境电商专家团队，提供专业的咨询和服务。</p>
          </div>
          <div class="advantage-item" data-aos="fade-up" data-aos-delay="100">
            <div class="advantage-number">02</div>
            <h3>技术创新</h3>
            <p>持续投入技术研发，提供先进的跨境电商解决方案。</p>
          </div>
          <div class="advantage-item" data-aos="fade-up" data-aos-delay="200">
            <div class="advantage-number">03</div>
            <h3>全球资源</h3>
            <p>整合全球优质资源，为企业提供全方位的跨境服务支持。</p>
          </div>
          <div class="advantage-item" data-aos="fade-up">
            <div class="advantage-number">04</div>
            <h3>安全保障</h3>
            <p>提供完善的安全保障措施，确保交易和数据的绝对安全。</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 服务流程 -->
    <section class="service-process">
      <div class="container">
        <h2 class="section-title" data-aos="fade-up">服务流程</h2>
        <div class="process-steps">
          <div class="process-step" data-aos="fade-up">
            <div class="step-number">1</div>
            <h3>需求分析</h3>
            <p>深入了解客户需求，制定个性化解决方案。</p>
          </div>
          <div class="process-step" data-aos="fade-up" data-aos-delay="100">
            <div class="step-number">2</div>
            <h3>方案设计</h3>
            <p>根据需求设计最优的跨境电商解决方案。</p>
          </div>
          <div class="process-step" data-aos="fade-up" data-aos-delay="200">
            <div class="step-number">3</div>
            <h3>实施部署</h3>
            <p>专业团队进行系统部署和配置。</p>
          </div>
          <div class="process-step" data-aos="fade-up" data-aos-delay="300">
            <div class="step-number">4</div>
            <h3>运营支持</h3>
            <p>提供持续的运营支持和优化服务。</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
// 组件逻辑
</script>

<style scoped>
.page-header {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('@/assets/services-header.jpg');
  background-size: cover;
  background-position: center;
  padding: 100px 0;
  text-align: center;
  color: #fff;
}

.page-header h1 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.main-services {
  padding: 80px 0;
  background: #fff;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.service-card {
  padding: 30px;
  background: #f8f9fa;
  border-radius: 10px;
  text-align: center;
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-10px);
}

.service-icon {
  font-size: 2.5rem;
  color: #3498db;
  margin-bottom: 20px;
}

.service-card h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.service-advantages {
  padding: 80px 0;
  background: #f8f9fa;
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.advantage-item {
  padding: 30px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.advantage-number {
  font-size: 2rem;
  font-weight: bold;
  color: #3498db;
  margin-bottom: 15px;
}

.advantage-item h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.service-process {
  padding: 80px 0;
  background: #fff;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.process-step {
  text-align: center;
  padding: 30px;
  background: #f8f9fa;
  border-radius: 10px;
}

.step-number {
  width: 50px;
  height: 50px;
  background: #3498db;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 auto 20px;
}

.process-step h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }
}
</style> 